<template>
	<el-card class="form-container">
		<el-form :model="editForm" ref="editForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()" label-width="90px">
			<el-form-item label="菜单名称" prop="menuName">
				<el-input v-model="editForm.menuName" placeholder="请输入菜单名称" readonly></el-input>
			</el-form-item>
			<el-form-item label="上级菜单" prop="parentCode">
				<treeselect
					v-model="editForm.parentCode"
					:options="menuOptions"
					:normalizer="normalizer"
					:show-count="true"
					placeholder="选择上级菜单"
				/>
			</el-form-item>
			<el-form-item label="菜单类型" prop="menuType">
				<el-input v-model="editForm.menuType" placeholder="请输入菜单类型"></el-input>
			</el-form-item>
			<el-form-item label=" 菜单描述" prop="menuDesc">
				<el-input v-model="editForm.menuDesc" placeholder="请输入 菜单描述"></el-input>
			</el-form-item>
			<el-form-item label="菜单路径" prop="menuUrl">
				<el-input v-model="editForm.menuUrl" placeholder="请输入菜单路径"></el-input>
			</el-form-item>
			<el-form-item label="菜单图标" prop="menuIcon">
				<el-popover
					placement="bottom-start"
					width="510"
					trigger="click"
					@show="$refs['iconSelect'].reset()"
				>
				<IconSelect ref="iconSelect" @selected="selected" />
					<el-input slot="reference" v-model="editForm.menuIcon" placeholder="点击选择图标" readonly>
						<svg-icon
							v-if="editForm.menuIcon"
							slot="prefix"
							:icon-class="editForm.menuIcon"
							class="el-input__icon"
							style="height: 40px;width: 20px;"
						/>
						<i v-else slot="prefix" class="el-icon-search el-input__icon" />
					</el-input>
				</el-popover>
			</el-form-item>
			<el-form-item label="授权编码" prop="authCode">
				<el-input v-model="editForm.authCode" placeholder="请输入授权编码"></el-input>
			</el-form-item>
			<el-form-item label="菜单排序" prop="menuSort">
				<el-input v-model="editForm.menuSort" placeholder="请输入菜单排序"></el-input>
			</el-form-item>
			<el-form-item label="菜单状态 1.启用 2.禁用" prop="menuStatus">
				<el-input v-model="editForm.menuStatus" placeholder="请输入菜单状态 1.启用 2.禁用"></el-input>
			</el-form-item>
			<el-form-item label="菜单上下级关系" prop="menuPath">
				<el-input v-model="editForm.menuPath" placeholder="请输入菜单上下级关系"></el-input>
			</el-form-item>
			<el-form-item label="前端组件" prop="menuComponent">
				<el-input v-model="editForm.menuComponent" placeholder="请输入菜单在前端对应的组件"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="submit('dataForm')">确定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import { findSystemMenuList,findSystemMenuDetail } from '@/api/admin/systemMenu'
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import IconSelect from "@/components/IconSelect";
	export default {
		name: 'user-systemMenu',
		data() {
			return {
				editForm: {
					id: '',
					menuCode: '',
					menuName: '',
					parentCode: null,
					menuType: '',
					menuDesc: '',
					menuUrl: '',
					menuIcon: '',
					authCode: '',
					menuSort: '',
					menuStatus: '',
					menuPath: '',
					menuComponent: '',
				}
			}
		},
		components:{
			Treeselect,
			IconSelect
		},
		created() {
			//初始化菜单树
			this.initTreeList();
			this.editForm.id = this.$route.query.id
			this.view(this.$route.query.id)
		},
		methods: {
			selected(name) {
				this.editForm.menuIcon = name;
			},
			//初始化菜单树
			initTreeList(){
				let initParams = {
					parentCode:0
				}
				findSystemMenuList(initParams).then(response => {
					this.menuOptions = [];
					const menu = { menuCode: 0, menuName: '主类目', children: [] };
					menu.children = this.handleTree(response.data.responseData, "menuCode");
					this.menuOptions.push(menu);
				})
			},
			/** 转换菜单数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.menuCode,
					label: node.menuName,
					children: node.children
				};
			},
			view(val) {
				findSystemMenuDetail(val).then(res => {
					this.editForm = res.data.responseData
				})
			},
			cancel() {
				this.$router.go(-1)
			},
			update() {

			}
		}
	}
</script>

<style>
</style>
